<script lang="ts" setup>
import { defineEmits, reactive, ref } from 'vue'

import { useVbenModal } from '@vben/common-ui'

import { HotTable } from '@handsontable/vue3'
import {Button} from "ant-design-vue";
import Handsontable from 'handsontable'

import 'handsontable/dist/handsontable.full.css'

// 定义要发送的事件
type EmitEvents = {
  pushData: {}
}

const emit = defineEmits<EmitEvents>()
const totalSkuTableComponent = ref<any>(null)
const showTotalSku = reactive({
  showData: false,
  data: ref([
    {
      first: 0,
      second: 0,
      third: 0,
      fourth: 0,
      fifth: 0,
      sixth: 0,
      seventh: 0,
      eighth: 0,
      ninth: 0,
      tenth: 0,
      eleven: 0,
      twelve: 0,
      total: 0,
    },
  ]),
})
const fields = [
  { data: 'first' },
  { data: 'second' },
  { data: 'third' },
  { data: 'fourth' },
  { data: 'fifth' },
  { data: 'sixth' },
  { data: 'seventh' },
  { data: 'eighth' },
  { data: 'ninth' },
  { data: 'tenth' },
  { data: 'eleven' },
  { data: 'twelve' },
]
const totalSkuSettings = {
  contextMenu: {
    // 单元格右击展示菜单
    items: {
      separator: Handsontable.plugins.ContextMenu.SEPARATOR,
    },
  },
  afterChange(change, source) {
    if (source == 'loadData') {
      return
    }
    console.log(change)
    showTotalSku.data[0].total = 0
    fields.forEach((r, i) => {
      showTotalSku.data[0].total = showTotalSku.data[0].total + showTotalSku.data[0][r.data]
    })
  },
  fillHandle: 'vertical', // 是否开启拖拽复制操作(true,false,'horizontal'水平复制,'vertical'垂直复制)
  width: '100%',
  height: 230,
  licenseKey: '2280d-dad74-843c8-51a09-b5218',
  colHeaders: [
    '28<br>46<br>165<br>37<br>S',
    '29<br>48<br>170<br>38<br>M',
    '30<br>50<br>175<br>39<br>L',
    '31<br>52<br>180<br>40<br>XL',
    '32<br>54<br>185<br>41<br>2XL',
    '33<br>56<br>190<br>42<br>3XL',
    '34<br>58<br>195<br>43<br>4XL',
    '35<br><br><br><br>5XL',
    '36<br><br><br><br>6XL',
    '38<br><br><br><br>7XL',
    '40',
    '42',
    '合计',
  ],
  copyable: true, // 允许键盘复制
  copyPaste: true, // 复制粘贴
  colWidths: 130,
  manualColumnResize: true,
  columns: [
    { data: 'first', width: 60, type: 'numeric' },
    { data: 'second', width: 60, type: 'numeric' },
    { data: 'third', width: 60, type: 'numeric' },
    { data: 'fourth', width: 60, type: 'numeric' },
    { data: 'fifth', width: 60, type: 'numeric' },
    { data: 'sixth', width: 60, type: 'numeric' },
    { data: 'seventh', width: 60, type: 'numeric' },
    { data: 'eighth', width: 60, type: 'numeric' },
    { data: 'ninth', width: 60, type: 'numeric' },
    { data: 'tenth', width: 60, type: 'numeric' },
    { data: 'eleven', width: 60, type: 'numeric' },
    { data: 'twelve', width: 60, type: 'numeric' },
    { data: 'total', width: 60, type: 'numeric' },
  ],
}
const [Modal, modalApi] = useVbenModal({
  class: 'w-2/5',
  showCancelButton: false,
  showConfirmButton: false,
  onCancel() {
    modalApi.close()
  },
  onConfirm() {},
})

/**
 * 处理推送按钮点击事件
 */
function handlePush() {
  // 发送数据到父组件，确保总是数组格式
  emit('pushData', showTotalSku.data)
  // 关闭模态框
  modalApi.close()
}
</script>

<template>
  <Modal title="调整总量:">
    <HotTable ref="totalSkuTableComponent" :data="showTotalSku.data" :settings="totalSkuSettings" />
    <template #prepend-footer>
      <Button @click="modalApi.close()">取消</Button>
      <Button type="primary" @click="handlePush()">保存</Button>
    </template>
  </Modal>
</template>
<style lang="scss" scoped></style>
